import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Row, Col, Card } from 'antd';
import {allDataStatisticsAction} from './index';
import { CommonTable } from 'components';


const convertData = (obj) => {
    const flowData = [{
        userRegPerCnt: obj['userRegPerCnt'],
        userRegCnt: obj['userRegCnt'],
        applyOdrPerCnt: obj['applyOdrPerCnt'],
        applyOdrCnt: obj['applyOdrCnt'],
        passOdrLoanPerCnt: obj['passOdrLoanPerCnt'],
        passOdrLoanCnt: obj['passOdrLoanCnt'],
        lengOdrPerCnt: obj['lengOdrPerCnt'],
        lengOdrCnt: obj['lengOdrCnt'],
        totalOdrPerCnt: obj['totalOdrPerCnt'],
        totalOdrCnt: obj['totalOdrCnt']
    }];
    const checkData = [{
        remainViewOdrCnt: obj['remainViewOdrCnt'],
        remainReviewOdrCnt: obj['remainReviewOdrCnt'],
        remainFivOdrCnt: obj['remainFivOdrCnt']
    }];
    const overdueData = [{
        OdrOverDuePerCnt: obj['OdrOverDuePerCnt'],
        OdrOverDueCnt: obj['OdrOverDueCnt'],
        OdrOverDuePerMoney: obj['OdrOverDuePerMoney'],
        OdrOverDueMoney: obj['OdrOverDueMoney']
    }];
    const moneyOutData = [{
        odrLoanPerMoney: obj['odrLoanPerMoney'],
        odrLoanMoney: obj['odrLoanMoney'],
        OrderOverDueLengPerMoney: obj['OrderOverDueLengPerMoney'],
        OrderOverDueLengMoney: obj['OrderOverDueLengMoney'],
        odrLoanTotalPerMoney: obj['odrLoanTotalPerMoney'],
        odrLoanTotalMoney: obj['odrLoanTotalMoney']
    }];
    const moneyInputData = [{
        payOdrPerMoney: obj['payOdrPerMoney'],
        payOdrMoney: obj['payOdrMoney'],
        payOdrLengPerMoney: obj['payOdrLengPerMoney'],
        payOdrLengMoney: obj['payOdrLengMoney'],
        payOdrDuePerMoney: obj['payOdrDuePerMoney'],
        payOdrDueMoney: obj['payOdrDueMoney']
    }];
    const waitBackData = [{
        OdrRemianPerMoney: obj['OdrRemianPerMoney'],
        OdrRemianMoney: obj['OdrRemianMoney'],
        OdrRemianDuePerMoney: obj['OdrRemianDuePerMoney'],
        OdrRemianDueMoney: obj['OdrRemianDueMoney']
    }];
    const allMoneyData = [{
        realOdrLoanMoney: obj['realOdrLoanMoney'],
        totalMoney: obj['totalMoney']
    }];
    return {
        flowData,
        checkData,
        overdueData,
        moneyOutData,
        moneyInputData,
        waitBackData,
        allMoneyData
    };
}



//今日流量
const flowColumns = [
    { title: '今日注册数', dataIndex: 'userRegPerCnt', key: 'userRegPerCnt' },
    { title: '总注册数', dataIndex: 'userRegCnt', key: 'userRegCnt' },
    { title: '今日申请数', dataIndex: 'applyOdrPerCnt', key: 'applyOdrPerCnt' },
    { title: '总申请数', dataIndex: 'applyOdrCnt', key: 'applyOdrCnt' },
    { title: '今日过件数', dataIndex: 'passOdrLoanPerCnt', key: 'passOdrLoanPerCnt' },
    { title: '总过件数', dataIndex: 'passOdrLoanCnt', key: 'passOdrLoanCnt' },
    { title: '今日展期数', dataIndex: 'lengOdrPerCnt', key: 'lengOdrPerCnt' },
    { title: '总展期数', dataIndex: 'lengOdrCnt', key: 'lengOdrCnt' },
    { title: '今日总件数', dataIndex: 'totalOdrPerCnt', key: 'totalOdrPerCnt' },
    { title: '总件数', dataIndex: 'totalOdrCnt', key: 'totalOdrCnt' },
];
//审核流量
const todayCheckColumns = [
    { title: '今日待机审', dataIndex: 'remainViewOdrCnt', key: 'remainViewOdrCnt' },
    { title: '今日待复审', dataIndex: 'remainReviewOdrCnt', key: 'remainReviewOdrCnt' },
    { title: '今日待终审', dataIndex: 'remainFivOdrCnt', key: 'remainFivOdrCnt' },
];
//逾期统计
const overdueColumns = [
    { title: '今日新增逾期数', dataIndex: 'OdrOverDuePerCnt', key: 'OdrOverDuePerCnt' },
    { title: '逾期总数', dataIndex: 'OdrOverDueCnt', key: 'OdrOverDueCnt' },
    { title: '今日新增逾期金额', dataIndex: 'OdrOverDuePerMoney', key: 'OdrOverDuePerMoney' },
    { title: '逾期总金额', dataIndex: 'OdrOverDueMoney', key: 'OdrOverDueMoney' }
];
//金额支出
const moneyOut = [
    { title: '今日放款金额', dataIndex: 'odrLoanPerMoney', key: 'odrLoanPerMoney' },
    { title: '总放款金额', dataIndex: 'odrLoanMoney', key: 'odrLoanMoney' },
    { title: '今日展期金额', dataIndex: 'OrderOverDueLengPerMoney', key: 'OrderOverDueLengPerMoney' },
    { title: '总展期金额', dataIndex: 'OrderOverDueLengMoney', key: 'OrderOverDueLengMoney' },
    { title: '今日总金额', dataIndex: 'odrLoanTotalPerMoney', key: 'odrLoanTotalPerMoney' },
    { title: '总金额', dataIndex: 'odrLoanTotalMoney', key: 'odrLoanTotalMoney' },
];
//金额回收
const moneyInput = [
    { title: '今日本金回款', dataIndex: 'payOdrPerMoney', key: 'payOdrPerMoney' },
    { title: '总本金回款', dataIndex: 'payOdrMoney', key: 'payOdrMoney' },
    { title: '今日展期回款', dataIndex: 'payOdrLengPerMoney', key: 'payOdrLengPerMoney' },
    { title: '总展期回款', dataIndex: 'payOdrLengMoney', key: 'payOdrLengMoney' },
    { title: '今日滞纳金', dataIndex: 'payOdrDuePerMoney', key: 'payOdrDuePerMoney' },
    { title: '总滞纳金', dataIndex: 'payOdrDueMoney', key: 'payOdrDueMoney' },
];

//待还金额
const waitBack = [
    { title: '今日待还金额', dataIndex: 'OdrRemianPerMoney', key: 'OdrRemianPerMoney' },
    { title: '总待还金额', dataIndex: 'OdrRemianMoney', key: 'OdrRemianMoney' },
    { title: '今日手续费', dataIndex: 'OdrRemianDuePerMoney', key: 'OdrRemianDuePerMoney' },
    { title: '总手续费', dataIndex: 'OdrRemianDueMoney', key: 'OdrRemianDueMoney' },
];

//总金额
const allMoney = [
    { title: '实际放出金额', dataIndex: 'realOdrLoanMoney', key: 'realOdrLoanMoney' },
    { title: '总回收金额', dataIndex: 'totalMoney', key: 'totalMoney' }
];

class AllDataStatistics extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({});
    }
    render() {
        const { tableData, loading } = this.props;
        const {
            flowData,
            checkData,
            overdueData,
            moneyOutData,
            moneyInputData,
            waitBackData,
            allMoneyData
        } = convertData(tableData);
        return (
            <div>
                <Card type={'inner'} title={'流量统计'}>
                    <Row style={{marginBottom: '20px'}}>
                        <Col span={4}>
                            今日
                        </Col>
                        <Col span={4}>
                            <div>注册数(个)</div>
                            <div>{tableData['userRegPerCnt']  || 0}</div>
                        </Col>
                        <Col span={4}>
                            <div>申请数(个)</div>
                            <div>{tableData['applyOdrPerCnt'] || 0}</div>
                        </Col>
                        <Col span={4}>
                            <div>过件数(个)</div>
                            <div>{tableData['passOdrLoanPerCnt'] || 0}</div>
                        </Col>
                        {/*<Col span={4}>*/}
                            {/*<div>展期数(个)</div>*/}
                            {/*<div>{tableData['lengOdrPerCnt'] || 0}</div>*/}
                        {/*</Col>*/}
                        <Col span={4}>
                            <div>总件数(个)</div>
                            <div>{tableData['totalOdrPerCnt'] || 0}</div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={4}>
                            总计
                        </Col>
                        <Col span={4}>
                            <div>注册数(个)</div>
                            <div>{tableData['userRegCnt'] || 0}</div>
                        </Col>
                        <Col span={4}>
                            <div>申请数(个)</div>
                            <div>{tableData['applyOdrCnt'] || 0}</div>
                        </Col>
                        <Col span={4}>
                            <div>过件数(个)</div>
                            <div>{tableData['passOdrLoanCnt'] || 0}</div>
                        </Col>
                        {/*<Col span={4}>*/}
                            {/*<div>展期数(个)</div>*/}
                            {/*<div>{tableData['lengOdrCnt'] || 0}</div>*/}
                        {/*</Col>*/}
                        <Col span={4}>
                            <div>总件数(个)</div>
                            <div>{tableData['totalOdrCnt'] || 0}</div>
                        </Col>
                    </Row>
                </Card>
                <div>
                    <Row gutter={16}>
                        <Col span={12}>
                            <CommonTable size={'middle'} dataSource={checkData} columns={todayCheckColumns} pagination={null} title={() => <div>审核统计</div>}/>
                        </Col>
                        <Col span={12}>
                            <CommonTable size={'middle'} dataSource={overdueData} columns={overdueColumns} pagination={null} title={() => <div>逾期统计</div>}/>
                        </Col>
                    </Row>
                </div>

                <Row gutter={16} style={{ marginBottom: '20px' }}>
                    <Col span={12}>
                        <Card type={'inner'} title={'金额支出(元)'}>
                            <Row style={{ marginBottom: '20px' }}>
                                <Col span={8}>
                                    <div>今日放款额(元)</div>
                                    <div>{tableData['odrLoanPerMoney'] || 0}</div>
                                </Col>
                                {/*<Col span={8}>*/}
                                    {/*<div>今日展期额(元)</div>*/}
                                    {/*<div>{tableData['OrderOverDueLengPerMoney'] || 0}</div>*/}
                                {/*</Col>*/}
                                <Col span={8}>
                                    <div>今日总放款额(元)</div>
                                    <div>{tableData['odrLoanTotalPerMoney'] || 0}</div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={8}>
                                    <div>总放款额(元)</div>
                                    <div>{tableData['odrLoanMoney'] || 0}</div>
                                </Col>
                                {/*<Col span={8}>*/}
                                    {/*<div>总展期额(元)</div>*/}
                                    {/*<div>{tableData['OrderOverDueLengMoney'] || 0}</div>*/}
                                {/*</Col>*/}
                                <Col span={8}>
                                    <div>放款总额(元)</div>
                                    <div>{tableData['odrLoanTotalMoney'] || 0}</div>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card type={'inner'} title={'金额回收(元)'}>
                            <Row style={{ marginBottom: '20px' }}>
                                <Col span={8}>
                                    <div>今日本金回款(元)</div>
                                    <div>{tableData['payOdrPerMoney'] || 0}</div>
                                </Col>
                                {/*<Col span={8}>*/}
                                    {/*<div>今日展期费回款(元)</div>*/}
                                    {/*<div>{tableData['payOdrLengPerMoney'] || 0}</div>*/}
                                {/*</Col>*/}
                                <Col span={8}>
                                    <div>今日滞纳金(元)</div>
                                    <div>{tableData['payOdrDuePerMoney'] || 0}</div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={8}>
                                    <div>总本金回款(元)</div>
                                    <div>{tableData['payOdrMoney'] || 0}</div>
                                </Col>
                                {/*<Col span={8}>*/}
                                    {/*<div>总展期费回款(元)</div>*/}
                                    {/*<div>{tableData['payOdrLengMoney'] || 0}</div>*/}
                                {/*</Col>*/}
                                <Col span={8}>
                                    <div>总滞纳金(元)</div>
                                    <div>{tableData['payOdrDueMoney'] || 0}</div>
                                </Col>
                            </Row>
                        </Card>

                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Card type={'inner'} title={'待还金额(元)'}>
                            {/*<Row style={{ marginBottom: '20px' }}>*/}
                            {/*<Col span={12}>*/}
                            {/*<div>今日待还金额(元)</div>*/}
                            {/*<div>{tableData['OdrRemianPerMoney'] || 0}</div>*/}
                            {/*</Col>*/}
                            {/*<Col span={12}>*/}
                            {/*<div>今日手续费(元)</div>*/}
                            {/*<div>{tableData['OdrRemianDuePerMoney'] || 0}</div>*/}
                            {/*</Col>*/}

                            {/*</Row>*/}
                            <Row>
                                <Col span={12}>
                                    <div>总待还金额(元)</div>
                                    <div>{tableData['OdrRemianMoney'] || 0}</div>
                                </Col>
                                <Col span={12}>
                                    <div>总手续费(元)</div>
                                    <div>{tableData['OdrRemianDueMoney'] || 0}</div>
                                </Col>
                            </Row>
                        </Card>

                    </Col>
                    <Col span={12}>
                        <Card type={'inner'} title={'总金额(元)'}>
                            <Row>
                                <Col span={12}>
                                    <div>实际放出金额(元)</div>
                                    <div>{tableData['realOdrLoanMoney'] || 0}</div>
                                </Col>
                                <Col span={12}>
                                    <div>总回收金额(元)</div>
                                    <div>{tableData['totalMoney'] || 0}</div>
                                </Col>

                            </Row>
                        </Card>

                    </Col>
                </Row>

                {/*<div>*/}
                {/*<CommonTable size={'middle'} dataSource={flowData} columns={flowColumns} pagination={null} loading={loading} title={() => <div>流量统计</div>}/>*/}
                {/*</div>*/}
                {/*<div>*/}
                {/*<Row gutter={40}>*/}
                {/*<Col span={12}>*/}
                {/*<CommonTable size={'middle'} dataSource={checkData} columns={todayCheckColumns} pagination={null} loading={loading} title={() => <div>审核统计</div>}/>*/}
                {/*</Col>*/}
                {/*<Col span={12}>*/}
                {/*<CommonTable size={'middle'} dataSource={overdueData} columns={overdueColumns} pagination={null} loading={loading} title={() => <div>逾期统计</div>}/>*/}
                {/*</Col>*/}
                {/*</Row>*/}
                {/*</div>*/}
                {/*<div>*/}
                {/*<CommonTable size={'middle'} dataSource={moneyOutData} columns={moneyOut} pagination={null} loading={loading} title={() => <div>金额支出</div>}/>*/}
                {/*</div>*/}
                {/*<div>*/}
                {/*<CommonTable size={'middle'} dataSource={moneyInputData} columns={moneyInput} pagination={null} loading={loading} title={() => <div>金额回收</div>}/>*/}
                {/*</div>*/}
                {/*<div>*/}
                {/*<Row gutter={40}>*/}
                {/*<Col span={12}>*/}
                {/*<CommonTable size={'middle'} dataSource={waitBackData} columns={waitBack} pagination={null} loading={loading} title={() => <div>待还金额</div>}/>*/}

                {/*</Col>*/}
                {/*<Col span={12}>*/}
                {/*<CommonTable size={'middle'} dataSource={allMoneyData} columns={allMoney} pagination={null} loading={loading} title={() => <div>总金额</div>}/>*/}
                {/*</Col>*/}
                {/*</Row>*/}
                {/*</div>*/}


            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const { businessStatisticsState: { allDataStatisticsState } } = state;
    return {
        tableData: allDataStatisticsState['tableData'],
        loading: allDataStatisticsState['loading']
    }
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: allDataStatisticsAction.adsGetTableData
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(AllDataStatistics);